<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-25 18:59:36
 * @LastEditors: kk
 * @LastEditTime: 2020-10-29 10:59:36
-->
<!--  -->
<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
        class="Center"
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => getCurrentKey(data)"
            >
              查看
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)"
            >
              添加
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              删除
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => updateKeyChildren( data)"
            >
              更新
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import menu from "@/api/menu";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenuList() {
      menu.getMenuList().then((response) => {
        this.data = response.data.children;
      });
    },

    append(data) {
      this.$prompt('请按以下格式输入：权限管理,/acl/menu/**', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          //提取字符串
          var strs = value.split(",");
          //获取父节点
          //console.log(JSON.parse(JSON.stringify(data))); //父亲结点
          var parent = JSON.parse(JSON.stringify(data));
          //构造json格式menu
          var m = {
            pid: parent.id,
            label: strs[0],
            url: strs[1],
          };
          var newMenu = JSON.parse(JSON.stringify(m));
          console.log(newMenu);
          //发送创建请求 id通过回馈获得
          menu.addMenu(newMenu).then((response) => {
            var res=response.data.menu
            console.log(res.label)
            const newChild = { id: res.id, label: res.label, children: [] };
            if (!data.children) {
              this.$set(data, "children", []);
            }
            data.children.push(newChild);
          });
          this.$message({
            type: "success",
            message: "添加内容是: " + value,
          });
        })
        .catch((error) => {
          console.log(error)
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      //console.log(JSON.parse(JSON.stringify(data))); //获取对应结点的JSON数据
      menu.removeMenu(data.id).then(response=>{
        const index = children.findIndex((d) => d.id === data.id);
        children.splice(index, 1);
      })
    },
    updateKeyChildren(data) {
      var newMenu=JSON.parse(JSON.stringify(data))
      this.$prompt('请按以下格式输入：权限管理,/acl/menu/**', newMenu.label, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
           //提取字符串
          var strs = value.split(",");
          //更新名字
          newMenu.label = strs[0];
          newMenu.url = strs[1];
          //发送更新请求
          menu.updateMenu(newMenu).then(response=>{
            this.$message({
              type: "success",
              message: "更改内容是: " + value,
            });
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    getCurrentKey(data){
      var newMenu=JSON.parse(JSON.stringify(data));
      this.$alert('权限名称为：'+newMenu.label+'，路径为：'+newMenu.url, newMenu.label, {
          confirmButtonText: '确定',
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenuList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.Center {
  margin-top: 20px;
  margin-left: 50px;
  width: 40%;
}
</style>